<template>
  <div class="home">
    <Tabs class="tab-style" @on-click="tabsChange">
      <TabPane label="请假列表" name="leaveList" class="table-style">
        <div class="query-style">
          <div class="term-style">
            <span>审批状态</span>
            <Select v-model="formItem.status" style="width: 100px">
              <Option value="0">全部</Option>
              <Option value="1">审批中</Option>
              <Option value="2">已通过</Option>
              <Option value="3">已驳回</Option>
            </Select>
          </div>
          <div class="term-style">
            <span>时间选择</span>
            <DatePicker type="daterange" v-model="formItem.date" :options="selectOptions" placeholder="请选择时间" style="width: 200px"></DatePicker>
          </div>
          <div class="term-style">
            <Button type="primary" icon="ios-search">查询</Button>
          </div>
        </div>
        <Table :columns="columns1" :data="data1"></Table>
        <div class="page-style">
          <Page :total="100" show-sizer></Page>
        </div>
      </TabPane>
      <TabPane label="审批列表" name="approvalList" class="table-style">
        <div class="query-style">
          <div class="term-style">
            <span>审批状态</span>
            <Select v-model="formItem.status" style="width: 100px">
              <Option value="0">全部</Option>
              <Option value="1">审批中</Option>
              <Option value="2">已通过</Option>
              <Option value="3">已驳回</Option>
            </Select>
          </div>
          <div class="term-style">
            <span>时间选择</span>
            <DatePicker type="daterange" v-model="formItem.date" :options="selectOptions" placeholder="请选择时间" style="width: 200px"></DatePicker>
          </div>
          <div class="term-style">
            <Button type="primary" icon="ios-search">查询</Button>
          </div>
        </div>
        <Table :columns="columns1" :data="data1"></Table>
        <div class="page-style">
          <Page :total="100" show-sizer></Page>
        </div>
      </TabPane>
      <TabPane label="抄送列表" name="copyList" class="table-style">
        <div class="query-style">
          <div class="term-style">
            <span>审批状态</span>
            <Select v-model="formItem.status" style="width: 100px">
              <Option value="0">全部</Option>
              <Option value="1">审批中</Option>
              <Option value="2">已通过</Option>
              <Option value="3">已驳回</Option>
            </Select>
          </div>
          <div class="term-style">
            <span>时间选择</span>
            <DatePicker type="daterange" v-model="formItem.date" :options="selectOptions" placeholder="请选择时间" style="width: 200px"></DatePicker>
          </div>
          <div class="term-style">
            <Button type="primary" icon="ios-search">查询</Button>
          </div>
        </div>
        <Table :columns="columns1" :data="data1"></Table>
        <div class="page-style">
          <Page :total="100" show-sizer></Page>
        </div>
      </TabPane>
    </Tabs>
    <Modal v-model="modal1" title="请假详情" width="642">
      <div class="modal-content">
        <div class="term-style">
          <span>请假类型</span>
          <Select v-model="detail.type" style="width: 216px">
            <Option value="0">事假</Option>
            <Option value="1">病假</Option>
            <Option value="2">调休</Option>
            <Option value="3">其他</Option>
          </Select>
        </div>
        <div class="term-style">
          <span>发起时间</span>
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择发起时间" style="width: 216px;" v-model="detail.releaseTime"></DatePicker>
        </div>
        <div class="term-style">
          <span>开始时间</span>
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择开始时间" style="width: 216px;" v-model="detail.startTime"></DatePicker>
        </div>
        <div class="term-style">
          <span>结束时间</span>
          <DatePicker type="datetime" format="yyyy-MM-dd HH:mm" placeholder="请选择结束时间" style="width: 216px;" v-model="detail.endTime"></DatePicker>
        </div>
        <div class="term-style">
          <span>时长</span>
          <Input v-model="detail.duration" style="width: 216px"></Input>
        </div>
        <div class="term-style">
          <span>所在部门</span>
          <Select v-model="detail.department" style="width: 216px">
            <Option value="0">研发一组</Option>
            <Option value="1">研发二组</Option>
            <Option value="2">研发三组</Option>
            <Option value="3">研发四组</Option>
          </Select>
        </div>
        <div class="term-style">
          <span>审批人</span>
          <Select v-model="detail.approval" style="width: 216px">
            <Option value="0">sss</Option>
            <Option value="1">eee</Option>
            <Option value="2">rrr</Option>
            <Option value="3">ttt</Option>
          </Select>
        </div>
        <div class="term-style">
          <span>抄送人</span>
          <Select v-model="detail.copy" style="width: 216px">
            <Option value="0">aaa</Option>
            <Option value="1">sss</Option>
            <Option value="2">ddd</Option>
            <Option value="3">ccc</Option>
          </Select>
        </div>
        <div class="term-style">
          <span>审批状态</span>
          <Select v-model="detail.approvalStatus" style="width: 216px">
            <Option value="0">已通过</Option>
            <Option value="1">待审批</Option>
            <Option value="2">已驳回</Option>
          </Select>
        </div>
        <div class="term-style">
          <span>请假事由</span>
          <Input v-model="detail.reason" style="width: 216px"></Input>
        </div>
        <div class="textarea-style">
          <span>审批意见</span>
          <Input v-model="detail.approvalOpinion" type="textarea" :rows="3" style="width: 528px"></Input>
        </div>
      </div>
      <div slot="footer">
        <!-- 仅查看 -->
        <Button v-show="forView" type="primary" @click="modal1 = false">关闭</Button>
        <!-- 审批操作 -->
        <div v-show="forApproval">
          <Button type="warning" @click="modal1 = false">驳回</Button>
          <Button type="success" @click="modal1 = false">通过</Button>
        </div>
        <!-- 修改 -->
        <div v-show="forEdit">
          <Button type="warning" @click="modal1 = false">取消</Button>
          <Button type="success" @click="modal1 = false">确认</Button>
        </div>
      </div>
    </Modal>
  </div>
</template>
<script>
  import { mapMutations } from 'vuex'
  export default {
    name: 'approvalLeave',
    components: {
    },
    data() {
      return {
        columns1: [
          {
            title: '审批标题',
            key: 'name'
          }, {
            title: '请假类型',
            key: 'type'
          }, {
            title: '开始时间',
            key: 'beginTime'
          }, {
            title: '结束时间',
            key: 'endTime'
          }, {
            title: '发起时间',
            key: 'applyTime'
          }, {
            title: '审批状态',
            key: 'status'
          }, {
            title: '操作',
            key: 'operate',
            width: 240,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'info',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.show(params.index)
                    }
                  }
                }, '详情'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display: this.approvalPower ? 'inline' : 'none'
                  },
                  on: {
                    click: () => {
                      this.approvalAction(params.index)
                    }
                  }
                }, '审批'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    display: this.editPower ? 'inline' : 'none'
                  },
                  on: {
                    click: () => {
                      this.editAction(params.index)
                    }
                  }
                }, '修改'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    display: this.recallPower ? 'inline' : 'none'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        title: '提示',
                        content: '<p>确认要撤回吗？</p>',
                        onOk: () => {
                          this.recallAffirm(params.index)
                        },
                        onCancel: () => {
                          this.modal1 = false
                        }
                      })
                    }
                  }
                }, '撤回')
              ])
            }
          }
        ],
        data1: [
          {'name': 'xxx的请假', 'type': '事假', 'beginTime': '2018-06-28 09:00:00', 'endTime': '2018-06-28 18:00:00', 'applyTime': '2018-06-27 17:00:00', 'status':'审批中'}
        ],
        formItem: {
          status: '',
          date: ''
        },
        selectOptions: {
          shortcuts: [
            {
              text: '最近一周',
              value() {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一月',
              value() {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三月',
              value() {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ]
        },
        modal1: false,
        // modal-foot
        forView: true,
        forApproval: false,
        forEdit: false,
        // table
        approvalPower: false,
        editPower: true,
        recallPower: true,
        detail: {
          type: '',
          releaseTime: '',
          startTime: '',
          endTime: '',
          duration: '',
          department: '',
          approval: '',
          copy: '',
          approvalStatus: '',
          reason: '',
          approvalOpinion: ''
        }
      }
    },
    methods: {
      show (index) {
        this.forView = true,
        this.forApproval = false,
        this.forEdit = false,
        this.modal1 = true
      },
      approvalAction (index) {
        this.forView = false,
        this.forApproval = true,
        this.forEdit = false,
        this.modal1 = true
      },
      editAction (index) {
        this.forView = false,
        this.forApproval = false,
        this.forEdit = true,
        this.modal1 = true
      },
      recallAffirm (index) {
        this.modal1 = false
      },
      tabsChange (name) {
        if (name === 'leaveList') {
          this.approvalPower = false
          this.editPower = true
          this.recallPower = true
          return
        }
        if (name === 'approvalList') {
          this.approvalPower = true
          this.editPower = false
          this.recallPower = false
          return
        }
        if (name === 'copyList') {
          this.approvalPower = true
          this.editPower = false
          this.recallPower = false
        }
      }
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
  }
  .tab-style {
    width: 100%;
    height: 100%;
    padding: 10px 0;
  }
  .table-style {
    padding: 20px;
  }
  .query-style {
    width: 100%;
    border: 1px solid #e9eaec;
    background-color: #f8f8f9;
    border-radius: 2px;
    margin-bottom: 20px;
    padding: 15px;
  }
  .query-style .term-style {
    margin-right: 30px;
  }
  .term-style, .textarea-style {
    display: inline-block;
  }
  .term-style span, .textarea-style span {
    margin-right: 10px;
    font-size: 12px;
    display: inline-block;
    width: 48px;
  }
  .modal-content {
    width: 100%;
    padding: 0 10px;
  }
  .modal-content .term-style, .modal-content .textarea-style {
    padding-bottom: 15px;
  }
  .modal-content .term-style:nth-child(odd) {
    margin-right: 30px;
  }
  .page-style {
    margin-top: 10px;
    position: relative;
    text-align: right;
  }
</style>